<template>
	<div>
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="90px">
				<uni-forms-item label="合同名称" name="contractName" required>
					<uni-easyinput type="text" v-model="formData.contractName" placeholder="请输入合同名称" />
				</uni-forms-item>
				<uni-forms-item label="开始日期" name="startTime" required>
					<uni-datetime-picker type="date" v-model="formData.startTime" />
				</uni-forms-item>
				<uni-forms-item label="结束日期" name="endTime" required>
					<uni-datetime-picker type="date" v-model="formData.endTime" />
				</uni-forms-item>
				
				<uni-forms-item label="结算方式">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<uni-data-select v-model="formData.settlementMethod" :localdata="settlementMethod"
							style="background-color: white;flex: 3;" />
						<input v-if="formData.settlementMethod=='5'" type="number" v-model="formData.settlementDays"
							style="height:35px;flex: 1;margin-left: 5px;border: 1px solid #F0F0F0;border-color: rgb(229, 229, 229);border-radius: 4px;background-color: white;padding-left: 10px;" />
						<view v-if="formData.settlementMethod=='5'" style="flex: 1;margin-left: 5px;">/天</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="油卡比例" name="proportion">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<input type="number" v-model="formData.oilCardRatio"
							style="height:35px;flex: 1;margin-left: 5px;border: 1px solid #F0F0F0;border-color: rgb(229, 229, 229);border-radius: 4px;background-color: white;padding-left: 10px;" />
						<view style="flex: 1;margin-left: 5px;">/%</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="合同保证金" name="money">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<input type="number" v-model="formData.contractDeposit"
							style="height:35px;flex: 1;margin-left: 5px;border: 1px solid #F0F0F0;border-color: rgb(229, 229, 229);border-radius: 4px;background-color: white;padding-left: 10px;" />
						<view style="flex: 1;margin-left: 5px;">元</view>
						<!-- <view style="flex: 1;margin-left: 5px;">
							<checkbox value="cb" checked="true" />已缴纳
						</view> -->
					</view>
				</uni-forms-item>
				<uni-forms-item label="相关附件" name="file">
					<myfilepicker :limit="'3'" :fileIdString="formData.attachments" :fileExtname="'pdf,png,gif,jpg,jpeg,doc,docx'" :fileMediatype="'all'"  @transFileIdString="getFileIdString"
							:title="'*点击上传合同附件，支持pdf/doc/docx/jpg/jpeg/png/gif，最多可上传3个附件*'"></myfilepicker>
				</uni-forms-item>
				<view style="display: flex;">
					<button hover-class="buttonHover" type="primary" @click="cancelSubmit()"
						style="color:#bf5f09;background-color:#ffffff;width: 100px;height: 35px;font-size: 14px;">取消</button>
					<button hover-class="buttonHover" type="primary" @click="submit()"
						style="color:#ffffff;background-color:#bf5f09;width: 100px;height: 35px;font-size: 14px;">确定</button>
				</view>
			</uni-forms>
		</view>
	</div>
</template>

<script>
	import {getDicts,getAllAddressTree} from '@/api/system/dict.js'
	import {getDistrict} from '@/api/system/dict.js'
	import myfilepicker from '@/components/uploadFile/uploadFile.vue'
	
	export default {
		components: {
			myfilepicker
		},
		data() {
			return {
				formData: {
					contractName: '',
					startTime: '',
					endTime: '',
					settlementMethod: '',
					settlementDays: '',
					oilCardRatio: '',
					contractDeposit: ''
				},
				// 校验规则
				rules: {
					contractName: {
						rules: [{
								required: true,
								errorMessage: '合同名称不能为空',
							}
						]
					},
					startTime: {
						rules: [{
							required: true,
							errorMessage: '开始日期不能为空',
						    }
						]
					},
					endTime: {
						rules: [{
							required: true,
							errorMessage: '结束日期不能为空',
						}]
					}
				},
				//下拉框 ->结算方式
				settlementMethod: [],
				//记录编辑的下标
				index:'',
			}
		},
		onLoad(e) {
			if(e.contractDetails)
			{
				//设置顶部导航栏标题
				uni.setNavigationBarTitle({
					title: '编辑合同'
				})
				this.index=e.index
				this.formData=JSON.parse(decodeURIComponent(e.contractDetails));
			}
		
		},
		created() {
			//获取结算方式下拉框
			getDicts('settle_type').then(res=>{
				this.settlementMethod=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
		},
		methods: {
			//接收文件传递的id字符串集合
			getFileIdString(fileIds){
				this.formData.attachments=fileIds
			},
			//取消
			cancelSubmit(){
				uni.navigateBack({
				    delta:1 // 可以不傳delta值，默認為1
				})
			},
			//确定
			submit() {
				this.$refs.form.validate().then(res=>{
					let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
					let nowPage = pages[pages.length - 1]; //当前页页面实例
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					
					prevPage.$vm.otherFun(this.formData,this.index)// 給上一頁綁定方法otherFun,傳參formData
					uni.navigateBack({
					    delta:1 // 可以不傳delta值，默認為1
					})
					
				}).catch(err =>{
					uni.showToast({
						title: err[0].errorMessage,
						icon:'none'
					})
				})
			}
		},
	}
</script>

<style scoped>
	::v-deep .file-title{
		font-size: 12px;
		color: #333;
	}
	.buttonHover {
		opacity: 0.6;
	}
</style>